<template>
  <view>
   <view class="header">
     <view class="back" @click="back()">
       <uni-icons type="left" size="20"></uni-icons>
     </view>
     <text>积分排名</text>
   </view>
    <view class="rank-type">
      <view :class="['school',active==1?'active':'']" @click="active = 1;getSchoolRank()">学校</view>
      <view :class="['collage',active==2?'active':'']" @click="active = 2;getCollageRank()">学院</view>
    </view>
    <view class="container">
      <block v-for="(item,index) in rankInfo" :key='index'>
        <view class="rank-box">
          <view class="rank-num">
            {{index+1}}
          </view>
          <view class="rank-info">
            <view class="image">
              <image :src="item.avatar" mode=""></image>
            </view>
            <view class="textInfo">
              <view class="name">
                {{item.nickName}}
              </view>
              <view class="collage">
                {{item.collegeName}}
              </view>
            </view>
          </view>
          <view class="integral">
            {{item.integral}}
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        active: 1,
        page: 1,
        pagesize: 10,
        rankInfo: []
      };
    },
    onLoad() {
      this.getSchoolRank()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getSchoolRank() {
        let that = this
        const obj = {
          page: that.page,
          pagesize: that.pagesize
        }
        const data = await uni.$http.post(`/users/users/integral/page`,obj)
        console.log(data.data.data.records);
        this.rankInfo = data.data.data.records
      },
     async getCollageRank() {
       const obj = {
         page: 1,
         pagesize: 5,
       }
       const data = await uni.$http.post(`/users/users/integral/page/${this.userInfo.collegeType}`,obj)
       console.log(data.data.data.records);
       this.rankInfo = data.data.data.records
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
  
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
    
    .back{
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .rank-type {
    display: flex;
    height: 80rpx;

    .school,
    .collage {
      width: 50%;
      text-align: center;
      line-height: 80rpx;
      background-color: #fff;
      color: #b6eaae;

      &.active {
        background-color: #b6eaae;
        color: #fff;
      }
    }
  }

  .container {
    width: 100%;
    height: 800rpx;
    margin-top: 20rpx;

    .rank-box {
      display: flex;
      align-items: center;
      height: 150rpx;

      .rank-num {
        width: 100rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }

      .rank-info {
        display: flex;
        width: 500rpx;

        .image {
          width: 100rpx;
          height: 100rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .textInfo {
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;

          .name {
            margin-top: 10rpx;
            color: #555;
            font-size: 30rpx;
          }

          .collage {
            margin-top: 10rpx;
            color: #999;
            font-size: 28rpx;
          }
        }
      }

      .integral {
        width: 100rpx;
        height: 100rpx;
        margin-left: 50rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }
</style>